<template>
  <div>
    <router-view></router-view>
    <button @click="asyncAddNumber">add</button>
    <button @click="to">to</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, ref } from 'vue';
import { mapActions, mapMutations } from 'vuex';
import { useGetters, useState } from './utils/mapper';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import qs from 'qs';
export default defineComponent({
  name: '',
  setup() {
    console.log(
      qs.stringify({ a: ['b', 'c', 'd'], b: 'hello' }, { indices: false })
    );
    const store = useStore();
    const router = useRouter();
    const { proxy } = getCurrentInstance() as any;
    const addNum = mapActions(['asyncAddNumber']).asyncAddNumber.bind({
      $store: store,
    });
    const to = () => {
      router.push({
        path: '/home/children-two',
        query: {
          city: 'chongqing',
        },
      });
    };
    const show = ref(true);
    const result = useGetters(['doubleCount']);
    // console.log(proxy.helloAction);
    return {
      to,
      show,
      addNum,
      ...result,
    };
  },
});
</script>

<style lang="less" scoped>
@keyframes zoomInUp {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.active {
  animation: zoomInUp 3s;
}
.leave {
  animation: zoomInUp 1s reverse;
}
</style>
